<template>
  <view class="" style="height: 100%; overflow: hidden">
    <scroll-view scroll-y="true" ref="scrollView" style="height: 100%">
      <view class="information-con">
        <view class="information-card" style="margin-bottom: 10px">
          <view class="order-tit"> 订单明细 </view>
          <u-line color="#ECECEC"></u-line>
          <view class="info-item" @click="copyLink">
            <text class="label">订单号</text>
            <view class="value" style="display: flex">{{info.orderId}}
              <u-icon size="20" color="#0F90FD" name="file-text"></u-icon>
            </view>
          </view>
          <view class="info-item">
            <text class="label">订单状态</text>
            <text class="value">{{statusInfo[info.orderStatus]}}</text>
          </view>
          <view class="info-item">
            <text class="label">取餐方式</text>
            <text class="value" v-if="info.sceneCode=='pickup'">门店自提</text>
            <text class="value" v-if="info.sceneCode=='takeout'"> 外卖配送</text>
          </view>

          <view class="info-item">
            <text class="label">配送时间</text>
            <!-- 自提 -->
            <text class="value" style="color: #0f90fd">立即取餐</text>
            <!-- 外卖 -->
            <!-- <text class="value" style="color:#FF5800 ">立即送达</text> -->
          </view>
          <!-- 外卖才显示这三个 -->
          <template v-if="info.sceneCode=='takeout'">
            <view class="info-item">
              <text class="label">收货地址</text>
              <text class="value">{{info.recipientAddress}}</text>
            </view>
            <view class="info-item">
              <text class="label">收货人姓名</text>
              <text class="value">{{info.recipientName}}</text>
            </view>
            <view class="info-item">
              <text class="label">联系电话</text>
              <text class="value">{{info.recipientPhone}}</text>
            </view>
          </template>

          <view class="info-item">
            <text class="label">订单来源</text>
            <text class="value">{{info.source==0?'微信小程序':'现场点单'}}</text>
          </view>
          <view class="info-item">
            <text class="label">下单时间</text>
            <text class="value">{{info.createDate}}</text>
          </view>
          <view class="info-item">
            <text class="label">制作完成时间</text>
            <text class="value">{{ info.completionTime ? info.completionTime : '-' }}</text>
          </view>
          <view class="info-item">
            <text class="label">订单备注</text>
            <view class="value">
              <text style="line-height: 18px;
    display: inline-block;">{{ info.remark ? info.remark : '-' }}</text>
            </view>
          </view>
          <view class="info-item">
            <text class="label">商家备注</text>
            <text class="value">{{ info.merchantRemark ? info.merchantRemark : '-' }}</text>
          </view>
        </view>
        <view class="information-card" style="margin-bottom: 10px">
          <view class="order-tit"> 会员信息 </view>
          <u-line color="#ECECEC"></u-line>
          <view class="info-item">
            <text class="label">下单人</text>
            <text class="value">{{ info.buyerName ? info.buyerName : '-' }}</text>
          </view>
          <view class="info-item">
            <text class="label">手机号</text>
            <text class="value">{{ info.phone ? info.phone : '-' }}</text>
          </view>
        </view>
        <view class="information-card">
          <view class="order-tit"> 支付信息 </view>
          <u-line color="#ECECEC"></u-line>
          <view class="info-item">
            <text class="label">订单金额</text>
            <text class="value">{{ info.totalAmount ? info.totalAmount : '-' }}</text>
          </view>
          <view class="info-item" v-if="info.sceneCode=='takeout'">
            <text class="label">配送费</text>
            <text class="value">{{info.deliveryFee}}</text>
          </view>
          <view class="info-item">
            <text class="label">优惠合计</text>
            <text class="value">-</text>
          </view>
          <view class="info-item">
            <text class="label">实付金额</text>
            <text class="value">{{ info.actualAmount ? info.actualAmount : '-' }}</text>
          </view>
          <view class="info-item">
            <text class="label">支付方式</text>
            <text class="value" v-if="info.paymentMethod==0"> 微信支付</text>
            <text class="value" v-if="info.paymentMethod==1"> 支付宝支付</text>
            <text class="value" v-if="info.paymentMethod==2"> 现金支付</text>
          </view>
          <view class="info-item">
            <text class="label">支付时间</text>
            <text class="value">{{ info.paymentTime ? info.paymentTime : '-' }}</text>
          </view>
          <view class="info-item">
            <text class="label">订单实收</text>
            <text class="value">{{ info.actualReceipt ? info.actualReceipt : '-' }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
  import {
    ref,
    computed,
    defineProps,
    defineEmits,
    watch
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const props = defineProps({
    detailInfo: Object,
  })
  let info = ref(props.detailInfo)
  watch(
    () => props.detailInfo,
    (newVal) => {
      info.value = newVal;
    }, {
      deep: true
    } // 深度监听对象内部变化
  );
  let statusInfo = ref({
    0: '待支付',
    1: '待制作',
    2: '制作中',
    3: '待取餐',
    4: '待配送',
    5: '配送中',
    6: '已完成',
    7: '已取消',
  })
  const copyLink = async () => {
    uni.setClipboardData({
      data: info.value.orderId,
      success: () => {
        uni.hideLoading();
        uni.showToast({
          title: '复制成功',
          icon: 'none'
        });
      },
      fail: (error) => {
        uni.hideLoading();
        console.error('复制失败', error);
      }
    });

  };
</script>
<style lang="scss" scoped>
  .information-con {
    .information-card {
      background-color: #fff;
      border-radius: 10px;

      .order-tit {
        padding: 9px 0 6px 10px;
        box-sizing: border-box;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }

      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 10px;
        box-sizing: border-box;

        .label {
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          line-height: 30px;
          white-space: nowrap;
          margin-right: 10px;
        }

        .value {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
          line-height: 30px;
          text-align: right;
        }
      }
    }
  }
</style>
